-
-
Notifications
You must be signed in to change notification settings - Fork 4.4k
feat(explore-suspect-attrs): Positioning floating trigger to the bottom right #94939
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅ ✅ All tests successful. No failed tests found. Additional details and impacted files@@ Coverage Diff @@
## master #94939 +/- ##
==========================================
- Coverage 87.93% 87.88% -0.05%
==========================================
Files 10455 10449 -6
Lines 606439 604333 -2106
Branches 23550 23547 -3
==========================================
- Hits 533251 531105 -2146
- Misses 72821 72861 +40
Partials 367 367 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bug: Chart Hook Positioning and Null Handling Errors
The useChartBoxSelect
hook has three issues:
chart.getDom()
is used without a null check before callinggetBoundingClientRect()
.- The return value of
chart.convertToPixel()
is destructured without a null check, which can cause aTypeError
if it returns null. - The
floatingTriggerPosition.left
calculation omitswindow.scrollX
, leading to incorrect positioning when the page is horizontally scrolled.
static/app/views/explore/hooks/useChartBoxSelect.tsx#L123-L136
sentry/static/app/views/explore/hooks/useChartBoxSelect.tsx
Lines 123 to 136 in 9c66878
// absolutely position the floating CTAs. | |
const [clamped_x1_pixels, clamped_y0_pixels] = chart.convertToPixel( | |
{xAxisIndex: 0, yAxisIndex: 0}, | |
[clamped_x1, clamped_y0] | |
); | |
const chartRect = chart.getDom().getBoundingClientRect(); | |
if (chartRect) { | |
setFloatingTriggerPosition({ | |
left: chartRect.left + clamped_x1_pixels, | |
top: chartRect.top + clamped_y0_pixels + window.scrollY, | |
}); | |
} |
Was this report helpful? Give feedback by reacting with 👍 or 👎
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
|
||
wrapper.addEventListener('mouseup', handleMouseUp); | ||
}, [brushArea, chartWrapperRef]); | ||
const chartRect = chart.getDom().getBoundingClientRect(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
iirc, getBoundingClientRect
can be performance heavy. If this is for the size and position of the chart, would it be reasonable to cache this? My thinking is that having this called on every onBrushEnd
might not be ideal, but this might just be nitpicking.
Always positioning at the bottom right prevents the trigger from covering the selected region.
Screen.Recording.2025-07-05.at.10.32.02.PM.mov